<template>
  <view class="main">
    <view class="item-box">
      <view
        class="item"
        @click="userInfoChange(item)"
        v-for="(item, index) in getMessageMoreData"
        :key="index"
      >
        <view class="user-box dispaly-just-between">
          <view class="user-left dispaly-just-between">
            <view class="user-avatar">
              <image :src="item?.avatar" mode="aspectFill" />
            </view>
            <view class="user-info-box">
              <view class="user-info-top dispaly-line-center">
                <view class="time">{{ item?.nickName }}</view>
                <view class="name">{{ item?.department }}</view>
                <view class="job-name" v-if="item?.company"
                  >({{ item?.company }})</view
                >
              </view>
              <view class="tel">
                <view
                  class="tel-number"
                  @click.stop="copyPhone(item?.phonenumber)"
                  >{{ item?.phonenumber }}</view
                >
                <view class="type" v-if="item?.type == 0">发布帖子</view>
                <view class="type" v-if="item?.type == 1">发布供需</view>
                <view class="type" v-if="item?.type == 2">文章推荐</view>
                <view class="type" v-if="item?.type == 3">加入圈子</view>
                <view class="type" v-if="item?.type == 5">退出圈子</view>
              </view>
              <view class="tel" v-if="item?.type == 4">
                <view class="tel-number"
                  >由{{ item?.recommendName }}推荐入群</view
                >
              </view>
            </view>
          </view>
          <view class="option dispaly-align-center">
            {{ item?.createTime }}</view
          >
        </view>
      </view>
      <LoadMore />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getMessagePage } from "@/api/apiList";

onLoad((e) => {
  if (e && e?.id) {
    getMessageMore(e?.id);
  }
});

const getMessageMoreData = ref();
const getMessageMore = async (ids) => {
  const response = await getMessagePage({ circleId: ids, pageSize: 999 });
  if (response && response?.code == 200) {
    getMessageMoreData.value = response?.rows;
  }
};

const userInfoChange = (parms) => {
  uni.navigateTo({
    url: `/pages/index/pages/businessCard?id=${parms.userId}&circleId=${parms.circleId}`,
  });
};
// 复制手机号
const copyPhone = (phone) => {
  uni.setClipboardData({
    data: phone,
    success: (res) => {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 2000,
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.item {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #ddd;

  .user-box {
    .user-left {
      .user-avatar {
        margin-right: 20rpx;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }
      }
    }

    .option {
      font-family: PingFang SC Regular;
      font-size: 22rpx;
      color: #aaaaaa;

      .i-one {
        margin-right: 40rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .user-info-box {
      .tel {
        .tel-number {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          font-weight: normal;
          color: #777777;
          margin-right: 8rpx;
        }

        .type {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          color: #0753fd;
        }
      }

      .user-info-top {
        align-items: flex-start;
        .name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #111111;
          margin: 0 8rpx;
        }

        .job-name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #999999;
        }
      }

      .time {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: 700;
        color: #111;
      }
    }
  }
}
</style>
